<template>
  <div>
    <el-dialog
      customClass="role-dialog"
      :close-on-click-modal="false"
      title="权限信息"
      :visible.sync="dialogVisible"
      width="520px"
      @close="cancel"
    >
      <div class="form-box">
        <TreeComp ref="treeComp" :menuOptions="menuOptions" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="blue-btn" @click="save" type="primary"
          >确定</el-button
        >
        <el-button icon="el-icon-circle-close" size="small" @click="cancel"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TreeComp from "./common/tree.vue";
import { permissionDetail, updatePermission } from "@/api/role.js";
import Mixins from "./mixins";
export default {
  mixins: [Mixins],
  components: { TreeComp },
  data() {
    return {
      dialogVisible: false,
      menuOptions: [],
      currentRole: {},
    };
  },
  created() {},
  methods: {
    show(obj) {
      this.currentRole = obj;
      this.dialogVisible = true;
      this.getAllMenuList().then((res) => {
        this.menuOptions = res;
        this.initPermiss(obj.id);
      });
    },
    initPermiss(id) {
      permissionDetail({ id }).then((res) => {
        this.$refs.treeComp.show(res.data);
      });
    },
    async save() {
      const p1 = await new Promise((resolve) => {
        this.$refs["treeComp"].$refs["formDataRef"].validate((valid) => {
          if (valid) resolve();
        });
      });
      await Promise.all([p1]).then(() => {
        const paramsTree = this.$refs["treeComp"].form;
        let params = {
          id: this.currentRole.id,
          menuIds: paramsTree.menuIds,
        };
        updatePermission(params).then(() => {
          this.$store.dispatch("SetAsyncRouter");
          this.cancel();
          this.$parent.initRole();
        });
      });
    },
    cancel() {
      this.$refs["treeComp"].reset();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.role-dialog .el-dialog__body) {
  min-height: auto !important;
}
</style>
